<!-- 商品列表 -->
<template>
  <div class="products">
    <Crumbs />
    <section class="products_content">
      <section class="search">
        <div class="search_header">
          <div class="search_header_l">
            <el-icon><Search /></el-icon><span>筛选搜索</span>
          </div>
          <div class="search_header_r">
            <el-button>重置</el-button>
            <el-button type="primary">查询结果</el-button>
          </div>
        </div>
        <section class="search_content">
          <ul class="search_list">
            <li class="search_item">
              <span>输入搜索：</span>
              <el-input placeholder="商品名称" />
            </li>
            <li class="search_item">
              <span>商品货号：</span>
              <el-input placeholder="商品货号" />
            </li>
            <li class="search_item">
              <span>商品分类：</span>
              <el-select class="m-2" placeholder="请选择">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </li>
            <li class="search_item">
              <span>商品品牌：</span>
              <el-select class="m-2" placeholder="请选择品牌">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </li>
            <li class="search_item">
              <span>上架状态 ：</span>
              <el-select class="m-2" placeholder="全部">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </li>
            <li class="search_item">
              <span>审核状态：</span>
              <el-select class="m-2" placeholder="全部">
                <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </li>
          </ul>
        </section>
      </section>
      <DataList />
      <main class="products_table">
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          border
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column property="id" label="编号" align="center" />
          <el-table-column label="商品图片" align="center">
            <template #default="{ row }">
              <img :src="row.pic" alt="" style="width: 80px; height: 80px" />
            </template>
          </el-table-column>
          <el-table-column label="商品名称" align="center">
            <template #default="{ row }">
              <p>{{ row.name }}</p>
              <p>品牌：{{ row.brandName }}</p>
            </template>
          </el-table-column>
          <el-table-column property="name" label="价格/货号" align="center">
            <template #default="{ row }">
              <p>价格：¥{{ row.price }}</p>
              <p>货号：{{ row.productSn }}</p>
            </template>
          </el-table-column>
          <el-table-column property="name" label="标签" align="center">
            <template #default="{ row }">
              <p>
                上架：
                <el-switch
                  :v-model="row.publishStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </p>
              <p>
                新品：
                <el-switch
                  v-model="row.newStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </p>
              <p>
                推荐：
                <el-switch
                  v-model="row.recommandStatus"
                  :active-value="1"
                  :inactive-value="0"
                />
              </p>
            </template>
          </el-table-column>
          <el-table-column property="sort" label="排序" align="center" />
          <el-table-column property="name" label="SKU库存" align="center">
            <template #default="{ row }">
              <el-button type="primary" :icon="Edit" circle />
            </template>
          </el-table-column>
          <el-table-column property="sale" label="销量" align="center" />
          <el-table-column label="审核状态" align="center">
            <template #default="{ row }">
              <p>{{ row.verifyStatus == '0' ? '未审核' : '已审核' }}</p>
              <p><el-button type="primary" text>审核详情</el-button></p>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center">
            <el-button>编辑</el-button>
            <el-button type="danger">删除</el-button>
          </el-table-column>
        </el-table>
      </main>
    </section>
  </div>
</template>

<script lang="ts" setup>
import { reactive, toRefs, ref } from 'vue';
import Crumbs from '../../components/Common/Crumbs.vue';
import DataList from '../../components/Common/DataList.vue';
import { useStore } from 'vuex';
import { GetProductListApi } from '../../request/api';
import { Edit } from '@element-plus/icons-vue';
const store = useStore();
// const value1 = ref(true);
// const value2 = ref(true);
// const value3 = ref(true);
let tableData = ref([]);
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
];

function fetchData() {
  GetProductListApi({
    pageNum: 1,
    pageSize: 15,
  }).then((res) => {
    if (res.code == 200) {
      console.log(res);
      tableData.value = res.data.list;
    }
  });
}
fetchData();
</script>
<style lang="less" scoped>
.products {
  .products_content {
    padding: 10px 20px;
    box-sizing: border-box;
    .search {
      padding: 20px;
      border: 1px solid #ebeef5;
      border-radius: 5px;
      margin-top: 20px;
      .search_header {
        display: flex;
        justify-content: space-between;
      }
      .search_content {
        margin-top: 20px;
        .search_list {
          display: flex;
          justify-content: space-around;
          flex-wrap: wrap;
          .search_item {
            width: 26%;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            span {
              width: 85px;
            }
            :deep(.el-input) {
              width: 210px;
            }
          }
        }
      }
    }
    .products_table {
      margin-top: 30px;
    }
  }
}
</style>
